<template>
		<view class="comment">
			<view class="card center">
				评价：
				<van-rate v-model="value" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
			</view>
			<view class="card center">
				<van-cell-group inset>
					<van-field v-model="message" rows="2" autosize label="评价商品" type="textarea" maxlength="50"
						placeholder="请输入评价" show-word-limit />
				</van-cell-group>
			</view>
			<view class="card center">
				上传图片：
			</view>
			<view class="card center">
				<van-grid :column-num="4">
					<van-grid-item v-for="f in fileList">
						<image :src="f.url"></image>
					</van-grid-item>
					<van-grid-item>
						<view class="upload" @click="uploadAvatarImg">
							<van-icon size="60upx" name="plus"></van-icon>
						</view>
					</van-grid-item>
				</van-grid>
			</view>
			<view class="card center">
				<van-button type="success" @click="sureComment">确定评价</van-button>
			</view>
		</view>
</template>

<script>
	import {
		ref
	} from 'vue';
	import Storage from '@/utils/storage.js'
	const Order  = uniCloud.importObject('order')
	export default {
		setup() {
			const value = ref(0);
			return {
				value,
				message: ref(""),
			};
		},
		data() {
			return {
				fileList: [],
				goods_id:"",
				order_id:"",
				index:0
			}
		},
		onLoad(options) {
			this.goods_id = options.id;
			this.order_id = options.order_id;
			this.index = options.index;
		},
		methods: {
			sureComment(){
				let that = this;
				Order.commentOrderGoods({
					goods_id:that.goods_id,
					order_id:that.order_id,
					index:that.index,
					user_id:Storage.UserInfo._id,
					star:that.value,
					imgs:that.fileList,
					content:that.message,
					// 在这里不要怕麻烦 把用户的头像和昵称都添加进来
				}).then(res=>{
					uni.navigateBack()
				})
			},
			uploadAvatarImg(res) {
				let that = this;
				const crop = {
					quality: 100,
					width: 500,
					height: 500,
					resize: true
				};
				uni.chooseImage({
					count: 1,
					crop,
					success: async (res) => {
						let tempFile = res.tempFiles[0],
							avatar_file = {
								// #ifdef H5
								extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
								// #endif
								// #ifndef H5
								extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
								// #endif
							},
							filePath = res.tempFilePaths[0]
						// #ifndef APP-PLUS
						//非app端用前端组件剪裁头像，app端用内置的原生裁剪
						if (!this.isPC) {
							filePath = await new Promise((callback) => {
								uni.navigateTo({
									url: '/uni_modules/uni-id-pages/pages/userinfo/cropImage/cropImage?path=' +
										filePath + `&options=${JSON.stringify(crop)}`,
									animationType: "fade-in",
									events: {
										success: url => {
											callback(url)
										}
									},
									complete(e) {
										console.log(e);
									}
								});
							})
						}
						// #endif
						let cloudPath = 'comment-' + Storage.UserInfo._id + '' + Date.now()
						avatar_file.name = cloudPath
						uni.showLoading({
							title: "上传中",
							mask: true
						});
						let {
							fileID
						} = await uniCloud.uploadFile({
							filePath,
							cloudPath,
							fileType: "image"
						});
						avatar_file.url = fileID
						that.fileList.push({
							url: fileID
						})
						uni.hideLoading()
					}
				})
			}
		}
	};
</script>

<style>
	.comment {
		background-color: #f2f2f2;
		padding-top: 30upx;
		min-height: 100vh;
	}
	.comment> view {
		margin-bottom: 30upx;
	}
	.van-grid-item {
		/* min-height: 250upx; */
		background-color: #f2f2f2;
	}

	.van-grid-item image {
		width: 80upx;
		height: 80upx;
	}

	.upload {
		text-align: center;
	}
</style>
